import React, { useState } from 'react';
import { View, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { Input, Button, Toast } from '@nutui/nutui-react-taro';
import { register } from '../../services/user';
import './index.scss';

const Register: React.FC = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [nickname, setNickname] = useState('');
  const [loading, setLoading] = useState(false);
  const [showToast, setShowToast] = useState(false);
  const [toastMessage, setToastMessage] = useState('');

  const handleRegister = async () => {
    if (!username.trim()) {
      setToastMessage('请输入用户名');
      setShowToast(true);
      return;
    }

    if (!password) {
      setToastMessage('请输入密码');
      setShowToast(true);
      return;
    }

    if (password !== confirmPassword) {
      setToastMessage('两次密码输入不一致');
      setShowToast(true);
      return;
    }

    try {
      setLoading(true);
      const response = await register({ 
        username, 
        password,
        nickname: nickname || username
      });
      Taro.setStorageSync('token', response.token);
      Taro.setStorageSync('userInfo', response.user);
      Taro.showToast({
        title: '注册成功',
        icon: 'success',
        duration: 2000
      });
      setTimeout(() => {
        Taro.reLaunch({ url: '/pages/index/index' });
      }, 2000);
    } catch (error) {
      setToastMessage(error.message || '注册失败');
      setShowToast(true);
    } finally {
      setLoading(false);
    }
  };

  const goToLogin = () => {
    Taro.navigateTo({ url: '/pages/login/index' });
  };

  return (
    <View className="register-container">
      <View className="register-header">
        <Text className="register-title">注册</Text>
        <Text className="register-subtitle">创建一个新账号</Text>
      </View>
      
      <View className="register-form">
        <View className="form-item">
          <Input 
            className="input"
            placeholder="用户名"
            value={username}
            onChange={(value) => setUsername(value)}
          />
        </View>
        
        <View className="form-item">
          <Input 
            className="input"
            placeholder="昵称（选填）"
            value={nickname}
            onChange={(value) => setNickname(value)}
          />
        </View>
        
        <View className="form-item">
          <Input 
            className="input"
            placeholder="密码"
            type="password"
            value={password}
            onChange={(value) => setPassword(value)}
          />
        </View>
        
        <View className="form-item">
          <Input 
            className="input"
            placeholder="确认密码"
            type="password"
            value={confirmPassword}
            onChange={(value) => setConfirmPassword(value)}
          />
        </View>
        
        <Button 
          type="primary" 
          block
          loading={loading}
          className="register-button"
          onClick={handleRegister}
        >
          注册
        </Button>
        
        <View className="login-link" onClick={goToLogin}>
          <Text>已有账号？点击登录</Text>
        </View>
      </View>
      
      <Toast
        visible={showToast}
        content={toastMessage}
        onClose={() => setShowToast(false)}
        type="warn"
        duration={2000}
      />
    </View>
  );
};

export default Register; 